<template>
  <view class="content">
    <view class="panel">
      <uni-list>
        <uni-list-item
            :title="manufacture">
          <view class="number-content">
            <view class="number-title">编号</view>
            <view class="number-detail">{{enCode}}</view>
          </view>
        </uni-list-item>
      </uni-list>
      <view class="code-content">
        <view class="qrcode" v-if="codeType === 1">
          <canvas canvas-id="qrcode" id="qrcode"/>
        </view>
        <view class="barcode" v-if="codeType === 2">
          <canvas canvas-id="barcode" id="barcode"/>
        </view>
        <view class="title">请扫描设备信息{{codeType === 1 ? '二维' : '条形'}}码</view>
      </view>
    </view>
    <message ref="message"></message>
  </view>
</template>

<script>

  import uniList from '@/components/uni/uni-list.vue'
  import uniListItem from '@/components/uni/uni-list-item.vue'
  import CODE from '@/lib/wmfCode/wmf.code.min.js';

  import store from "@/store/index.js"

  export default {
    data() {
      return {
        codeType: 1,
        name: '',
        manufacture: '',
        enCode: ''
      }
    },
    onLoad(option) {
      this.codeType = parseInt(option.codeType);
      this.manufacture = option.manufacture;
      this.enCode = option.enCode;
      uni.setNavigationBarTitle({
        title: this.codeType === 1 ? '二维码图片' : '条形码图片'
      })
    },
    /**
     * 只能在onReady中进行初始化
     */
    onReady() {
      this.$refs.message.setMessageToStore(this.$refs.message)
      switch (this.codeType) {
        case 1: {
          this.createQrCode();
          break;
        }
        case 2: {
          this.createBarCode();
          break;
        }
        default:
          break;
      }
    },
    methods: {
      /**
       * 保存二维码
       * @returns {Promise<void>}
       */
      async saveCode() {
        // 第一个参数 qrcode 为 canvas-id
        // 第二个参数 210 为二维码的宽度
        // 第三个参数 210 为二维码的高度
        // 如果是二维码怎 宽高度一样为 二维码的 size
        const res = await CODE.SaveCode('qrcode', 210, 210) // 保存二维码图片
      },
      /**
       * 生成二维码
       */
      createQrCode() {
        CODE.QRCode({
          id: 'qrcode',// canvas的canvas-id
          code: this.enCode,//生成二维码的字符串
          size: 410,// 二维码大小
          level: 4,//等级 0～4
          // img: require('@/static/logo.png'),//图片
          iconSize: 40,//二维码图标的大小
          color: '#333'// 二维码颜色 默认黑色
        });
      },
      /**
       * 生成条形码
       */
      createBarCode() {
        CODE.BarCode({
          id: 'barcode',// canvas 的canvas-id
          code: this.enCode,// 生成条形码的字符串
          color: '#000',// 条形码的颜色
          bgColor: '#FFFFFF',// 背景色
          width: 300,// 宽度
          height: 100// 高度
        });
      }
    },
    components: {
      uniList, uniListItem
    },
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
  };
</script>

<style>
  page{
    background-color: #f5f5f5;
  }
</style>

<style scoped lang="scss">
  @import "~@/static/css/device/code.scss";
</style>